<template>
	<div class="monitor-box" id="full-screen" :style="`height:${monitorBoxHeight}px`">
		<div class="header-box zs-layout-flex-row zs-layout-items-center zs-layout-justify-between">
			<div class="side-box monitor-project-select">
				<el-select v-if="isFull" v-model="projectCode" placeholder="项目名称" popper-class="no-bg-select-class" filterable :teleported="false">
					<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
				</el-select>
			</div>
			<div class="header-title">公区能耗监控</div>
			<div class="time-box side-box zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
				<div class="zs-space-right-sm">{{ showTime }}</div>
				<el-icon v-if="!isFull" class="cursor-pointer" @click="fullScreen"><FullScreen /></el-icon>
				<img v-else class="cursor-pointer" :src="cancleFullPic" @click="fullScreen" />
			</div>
		</div>
		<div class="content-box">
			<div class="zs-layout-flex-row">
				<div class="s-out-box m-r-15">
					<div class="s-box" :style="`height:${slHeight}px`">
						<TitleBox title="总用电量" />
						<div class="content">
							<img class="placeholder-pic" :src="placeholderPic" />
						</div>
					</div>
					<div class="s-box" :style="`height:${slHeight}px`">
						<TitleBox title="电表数量" />
						<div class="content">
							<img class="placeholder-pic" :src="placeholderPic" />
						</div>
					</div>
				</div>
				<div class="m-box m-r-15" :style="`height:${mHeight}px`">
					<TitleBox title="用电异常" />
					<div class="content">
						<img class="placeholder-pic" :src="placeholderPic" />
					</div>
				</div>
				<div class="m-box m-r-15" :style="`height:${mHeight}px`">
					<TitleBox title="用水异常" />
					<div class="content">
						<img class="placeholder-pic" :src="placeholderPic" />
					</div>
				</div>
				<div class="s-out-box">
					<div class="s-box" :style="`height:${slHeight}px`">
						<TitleBox title="总用水量" />
						<div class="content">
							<img class="placeholder-pic" :src="placeholderPic" />
						</div>
					</div>
					<div class="s-box" :style="`height:${slHeight}px`">
						<TitleBox title="水表数量" />
						<div class="content">
							<img class="placeholder-pic" :src="placeholderPic" />
						</div>
					</div>
				</div>
			</div>
			<div class="zs-layout-flex-row">
				<div class="l-box m-r-15" :style="`height:${slHeight}px`">
					<TitleBox title="实时用电" />
					<div class="content">
						<EleRealTime :projectCode="projectCode" :showTime="showTimeStamp"></EleRealTime>
					</div>
				</div>
				<div class="l-box" :style="`height:${slHeight}px`">
					<TitleBox title="实时用水" />
					<div class="content">
						<WaterRealTime :projectCode="projectCode" :showTime="showTimeStamp"></WaterRealTime>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import EleRealTime from './modules/eleRealTime.vue';
	import WaterRealTime from './modules/waterRealTime.vue';
	import { ref, onMounted, defineComponent, computed, watch } from 'vue';
	import { requestFullScreen, isIpad, parseTime } from '@/utils/publicUtils';
	import { useRouter } from 'vue-router';
	import dbPublicApi from '@/api/dbPublic';

	const props = defineProps({
		projectCode: {
			type: String,
			required: false,
			default: ''
		},
		tabPermi: {
			type: String,
			required: false,
			default: ''
		},
		updateDate: {
			type: String,
			required: false,
			default: ''
		},
	})
	const fullScreen = ref(null);
	const isFull = ref(false);
	const router = useRouter();
	let projectList = ref([]);
	let projectCode = ref(props.projectCode);
	let showTimeStamp = ref(new Date().getTime());
	let showTime = ref(parseTime(showTimeStamp.value, '{y}-{m}-{d} {h}:{i}'));
	const placeholderPic = require('@/assets/image/energyMonitor/placeholder.png');
	const cancleFullPic = require('@/assets/image/energyMonitor/cancleFull.png');

	watch(
		() => props.projectCode,
		(newVal) => {
			projectCode.value = newVal
		}
	)

	let projectName = computed(() => {
		let target = projectList.value.find(item => item.projectCode == projectCode.value);
		return target?.projectName;
	});

	//头部组件
	const TitleBox = defineComponent({
		props: { title: String },
		setup(props) {
			//跳转
			const goDetail = title => {
				if (title == '实时用电') {
					router.push({
						path: '/page/routeController/index',
						query: {
							rid: 'EnergyElectricity',
							rTitle: '能源明细表',
							projectCode: projectCode.value,
							projectName: projectName.value,
							showTimeStamp: showTimeStamp.value,
							source: 'dashboard'
						},
					});
				}
			};
			return () => (
				<div class="title-box zs-layout-flex-row zs-layout-items-center zs-layout-justify-between">
					<span class="zs-title-sm">{props.title}</span>
					<el-icon class="cursor-pointer" onClick={ () => goDetail(props.title)}>
						<MoreFilled />
					</el-icon>
				</div>
			);
		},
	});

	//项目信息
	const getProjectList = async () => {
		let res = await dbPublicApi.queryProjectPcApi({ dataTime: props.updateDate, resourceKey: props.tabPermi });
		if (res.data.code != 200) return;
		projectList.value = res.data.data;
	};

	//监听全屏否
	const onFullscreenChange = () => {
		isFull.value = document.fullscreenElement || document.webkitFullscreenElement ? true : false;
		getHeight();
	};

	//计算高度
	let slHeight = ref(0);
	let mHeight = ref(0);
	let monitorBoxHeight = ref(0);
	const getHeight = () => {
		const ipad = isIpad();
		const windowHeight = isFull.value ? window.outerHeight : window.innerHeight;
		const contentHeight = windowHeight - 126; //56px(tab路由标签34 + margin24 + 右上角tab切换56 + 他的margin-b:12)
		const baseHeight = ipad ? contentHeight - 182 - 22 : contentHeight - 182; //182 = 52px(头部高度) - 30px(两个padding-15) - 40px（两个margin20 - 60px(6个padding10)
		const baseHeightFull = ipad ? windowHeight - 182 - 22 : windowHeight - 182; //182 同上  ipad再减22
		slHeight.value = isFull.value ? baseHeightFull / 3 : baseHeight / 3;
		mHeight.value = isFull.value ? slHeight.value * 2 + 35 : slHeight.value * 2 + 35; // 两个s-box的高度 + 35 = 15的margin + 20的padding
		monitorBoxHeight.value = isFull.value ? windowHeight : contentHeight;
	};

	getProjectList();

	onMounted(() => {
		const contentElement = document.getElementById('full-screen');
		fullScreen.value = () => {
			requestFullScreen(contentElement);
		};
		getHeight();
		document.addEventListener('fullscreenchange', onFullscreenChange);
		document.addEventListener('mozfullscreenchange', onFullscreenChange);
		document.addEventListener('webkitfullscreenchange', onFullscreenChange);
		document.addEventListener('msfullscreenchange', onFullscreenChange);
	});
</script>

<style scoped lang="scss">
	@mixin chunk-box($url) {
		padding: 10px;
		background: url($url) no-repeat center;
		background-size: 100% 100%;
	}
	.s-out-box {
		width: calc((100% - 125px) / 4 + 20px); // 45:3个margin15 80: 8个padding10
		.s-box {
			width: calc(100% - 20px);
			margin-bottom: 15px;
			@include chunk-box('@/assets/image/energyMonitor/bgChunkS.png');
		}
	}
	.m-box {
		width: calc((100% - 125px) / 4);
		margin-bottom: 15px;
		@include chunk-box('@/assets/image/energyMonitor/bgChunkM.png');
	}
	.l-box {
		width: calc((100% - 55px) / 2); // 55 = 15:1个margin15 +  40: 4个padding10
		@include chunk-box('@/assets/image/energyMonitor/bgChunkL.png');
	}
	.monitor-box {
		width: 100%;
		background: url('@/assets/image/energyMonitor/bgHome.png') no-repeat center/cover;
		.header-box {
			width: 100%;
			height: 52px;
			background: url('@/assets/image/energyMonitor/header.png') no-repeat center;
			background-size: 100% 100%;
			.header-title {
				font-size: 26px;
			}
			.monitor-project-select {
				margin-left: 6%;
				:deep(.el-input__wrapper) {
					background: none;
					box-shadow: none;
				}
				:deep(.el-input--suffix) .el-input__inner {
					font-size: 14px;
					background: none;
					border: none;
					color: #8be1ff;
				}
				:deep(.el-select) .el-input .el-icon {
					color: #8be1ff !important;
				}
			}
			.time-box {
				margin-right: 6%;
				text-align: right;
			}
			.side-box {
				width: 156px;
			}
		}
		.content-box {
			padding: 20px;
			margin-bottom: env(safe-area-inset-bottom);
			.title-box {
				padding: 5px 0 15px;
				position: relative;
			}
			.title-box::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 1px;
				background: linear-gradient(to right, #259ba8, #1c0bb5, #5755ec);
			}
			.content {
				position: relative;
				height: calc(100% - 36px);
			}
			.placeholder-pic {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	.m-r-15 {
		margin-right: 15px;
	}
	.primary-color,
	div,
	p,
	span {
		color: #8be1ff;
	}
</style>
